<template>
    <canvas ref="canvas" @click="draw" width="125" height="35" style="cursor: pointer;"></canvas>
  </template>
  <script>
  export default {
    data() {
      return {
        codes: [],
        ctx: "",
        colors: ["red", "yellow", "blue", "green", "pink", "black"],
        code_Len: 4
      };
    },
    mounted() {
      this.draw();
    },
    computed: {
      codeString() {
        let result = "";
        for (let i = 0; i < this.codes.length; i++) {
          result += this.codes[i];
        }
        return result.toUpperCase();
      }
    },
    watch: {
      codeString: function(newValue) {
        this.$emit("change", newValue);
      }
    },
    methods: {
      generateRandom() {
        this.codes = [];
        const chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789";
        const charsArr = chars.split("");
   
        for (let i = 0; i < this.code_Len; i++) {
          const num = Math.floor(Math.random() * charsArr.length);
          this.codes.push(charsArr[num]);
        }
      },
      draw() {
        this.generateRandom();
        this.drawText();
      },
      drawLine() {
        const lineNumber = 3; // 线条条数
        const lineX = 140;
        const lineY = 30; // 最大线条坐标
        for (let i = 0; i < lineNumber; i++) {
          this.ctx.strokeStyle = this.colors[Math.floor(Math.random() * 5)];
          this.ctx.beginPath();
          this.ctx.moveTo(
            Math.floor(Math.random() * lineX),
            Math.floor(Math.random() * lineY)
          );
          this.ctx.lineTo(
            Math.floor(Math.random() * lineX),
            Math.floor(Math.random() * lineY)
          );
          this.ctx.stroke();
        }
      },
      drawText() {
        const canvas = this.$refs["canvas"];
        this.ctx = canvas.getContext("2d");
   
        this.ctx.fillStyle = "#BFEFFF";
        this.ctx.fillRect(0, 0, 140, 40);
        this.ctx.font = "20px Verdana";
   
        let x = 15;
   
        for (let i = 0; i < this.code_Len; i++) {
          this.ctx.fillStyle = this.colors[Math.floor(Math.random() * 5)];
          this.ctx.fillText(this.codes[i], x, 25);
          x = x + 30;
        }
   
        this.drawLine();
      }
    }
  };
  </script>